<template>
	<view
		class="u-scroll-list"
		ref="u-scroll-list"
	>
		<!-- #ifdef APP-NVUE -->
		<!-- nvue使用bindingX实现，以得到更好的性能 -->
		<scroller
			class="u-scroll-list__scroll-view"
			ref="u-scroll-list__scroll-view"
			scroll-direction="horizontal"
			:show-scrollbar="false"
			:offset-accuracy="1"
			@scroll="nvueScrollHandler"
		>
			<view class="u-scroll-list__scroll-view__content">
				<slot />
			</view>
		</scroller>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE -->
		<!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
		<!-- 以上平台，支持wxs -->
		<scroll-view
			class="u-scroll-list__scroll-view"
			scroll-x
			@scroll="wxs.scroll"
			@scrolltoupper="wxs.scrolltoupper"
			@scrolltolower="wxs.scrolltolower"
			:data-scrollWidth="scrollWidth"
			:data-barWidth="$u.getPx(indicatorBarWidth)"
			:data-indicatorWidth="$u.getPx(indicatorWidth)"
			:show-scrollbar="false"
			:upper-threshold="0"
			:lower-threshold="0"
		>
			<!-- #endif -->
			<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
			<!-- 非以上平台，只能使用普通js实现 -->
			<scroll-view
				class="u-scroll-list__scroll-view"
				scroll-x
				@scroll="scrollHandler"
				@scrolltoupper="scrolltoupperHandler"
				@scrolltolower="scrolltolowerHandler"
				:show-scrollbar="false"
				:upper-threshold="0"
				:lower-threshold="0"
			>
				<!-- #endif -->
				<view class="u-scroll-list__scroll-view__content">
					<slot />
				</view>
			</scroll-view>
			<!-- #endif -->
			<view
				class="u-scroll-list__indicator"
				v-show="indicator"
				:style="[$u.addStyle(indicatorStyle)]"
			>
				<view
					class="u-scroll-list__indicator__line"
					:style="[lineStyle]"
				>
					<view
						class="u-scroll-list__indicator__line__bar"
						:style="[barStyle]"
						ref="u-scroll-list__indicator__line__bar"
					></view>
				</view>
			</view>
	</view>
</template>

<script
	src="./scrollWxs.wxs"
	module="wxs"
	lang="wxs"
></script>

<script>
/**
 * scrollList 横向滚动列表
 * @description 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
 * @tutorial https://www.uviewui.com/components/scrollList.html
 * @property {String | Number}	indicatorWidth			指示器的整体宽度 (默认 50 )
 * @property {String | Number}	indicatorBarWidth		滑块的宽度 (默认 20 )
 * @property {Boolean}			indicator				是否显示面板指示器 (默认 true )
 * @property {String}			indicatorColor			指示器非激活颜色 (默认 '#f2f2f2' )
 * @property {String}			indicatorActiveColor	指示器的激活颜色 (默认 '#3c9cff' )
 * @property {String | Object}	indicatorStyle			指示器样式，可通过bottom，left，right进行定位
 * @event {Function} left	滑动到左边时触发
 * @event {Function} right	滑动到右边时触发
 * @example
 */
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin("dom");
import nvueMixin from "./nvue.js";
// #endif
import props from "./props.js";
export default {
  name: "u-scroll-list",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  // #ifdef APP-NVUE
  mixins: [uni.$u.mpMixin, uni.$u.mixin, nvueMixin, props],
  // #endif
  data() {
    return {
      scrollInfo: {
        scrollLeft: 0,
        scrollWidth: 0,
      },
      scrollWidth: 0,
    };
  },
  computed: {
    // 指示器为线型的样式
    barStyle() {
      const style = {};
      // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
      // 此为普通js方案，只有在非nvue和不支持wxs方案的端才使用、
      // 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
      // 滑动距离(指示器的总宽度减去滑块宽度)的比值
      const scrollLeft = this.scrollInfo.scrollLeft,
        scrollWidth = this.scrollInfo.scrollWidth,
        barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth;
      const x =
        (scrollLeft / (scrollWidth - this.scrollWidth)) * barAllMoveWidth;
      style.transform = `translateX(${x}px)`;
      // #endif
      // 设置滑块的宽度和背景色，是每个平台都需要的
      style.width = uni.$u.addUnit(this.indicatorBarWidth);
      style.backgroundColor = this.indicatorActiveColor;
      return style;
    },
    lineStyle() {
      const style = {};
      // 指示器整体的样式，需要设置其宽度和背景色
      style.width = uni.$u.addUnit(this.indicatorWidth);
      style.backgroundColor = this.indicatorColor;
      return style;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getComponentWidth();
    },
    // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
    // scroll-view触发滚动事件
    scrollHandler(e) {
      this.scrollInfo = e.detail;
    },
    scrolltoupperHandler() {
      this.scrollEvent("left");
      this.scrollInfo.scrollLeft = 0;
    },
    scrolltolowerHandler() {
      this.scrollEvent("right");
      // 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
      // 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
      this.scrollInfo.scrollLeft =
        uni.$u.getPx(this.indicatorWidth) -
        uni.$u.getPx(this.indicatorBarWidth);
    },
    // #endif
    //
    scrollEvent(status) {
      this.$emit(status);
    },
    // 获取组件的宽度
    async getComponentWidth() {
      // 延时一定时间，以获取dom尺寸
      await uni.$u.sleep(30);
      // #ifndef APP-NVUE
      this.$uGetRect(".u-scroll-list").then((size) => {
        this.scrollWidth = size.width;
      });
      // #endif

      // #ifdef APP-NVUE
      const ref = this.$refs["u-scroll-list"];
      ref &&
        dom.getComponentRect(ref, (res) => {
          this.scrollWidth = res.size.width;
        });
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-scroll-list {
  padding-bottom: 10px;

  &__scroll-view {
    @include flex;

    &__content {
      @include flex;
    }
  }

  &__indicator {
    @include flex;
    justify-content: center;
    margin-top: 15px;

    &__line {
      width: 60px;
      height: 4px;
      border-radius: 100px;
      overflow: hidden;

      &__bar {
        width: 20px;
        height: 4px;
        border-radius: 100px;
      }
    }
  }
}
</style>
